/**
 * @Name:  HighLight
 * @Author:
 * @Desc:  高亮代码
 * @Date: 2020-11-19 15:47:38
 */

import React, { Component } from "react";
import styles from "./styles.module.less";
import { EnterCodeText, HighLightJs } from "@/component";
const highOne = `let str = "008,00801,008,00802,009,00901";
let arr = str.split(",");
let num = 4;
let newArr = arr.reduce((pre, cur, index) => {
  if (index % num === 0) {
    return pre.concat([arr.slice(index, index + num)]);
  } else {
    return pre;
  }
}, []);
console.log("newarr==", newArr);//[["008","00801"],["008","00802"],["009","00901"]]`;
class HighLight extends Component {
  state = {
    proVis: false,
    codeType: "JavaScript", //默认JavaScript
    data: highOne //内容
  };
  /**
   * @name typeChange
   * @description 代码类型变化
   */
  typeChange = (codeType) => {
    this.setState({ codeType });
  };
  /**
   * @name onOk
   * @description 确定
   */
  onOk = (data) => {
    this.setState({ data, proVis: false });
  };
  /**
   * @name onCancel
   * @description 取消
   */
  onCancel = () => {
    this.setState({ proVis: !this.state.proVis });
  };
  render() {
    const { proVis, codeType, data } = this.state;
    return (
      <div>
        <div className={styles.btn} title="插入代码块" onClick={this.onCancel}>
          <span className={styles.left_icon}>&#x276E;</span>
          <span className={styles.middle_icon}>&#x2759;</span>
          <span className={styles.right_icon}>&#x276F;</span>
        </div>
        <EnterCodeText codeType={codeType} proVis={proVis} typeChange={this.typeChange} onOk={this.onOk} onCancel={this.onCancel} />
        {data && <HighLightJs type={codeType} data={data} />}
      </div>
    );
  }
}

export default HighLight;
